<!DOCTYPE HTML>
<html>

<head>
    <title>账号管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body class="dark-theme">
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>账号管理
                <button id="add-account-btn" class="jx-btn btn-default pull-right">新增轮播</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <div>
                    <div id="grid"></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
        </div>
    </div>
</div>
</div>

<!-- 初始隐藏 dialog内容    -->
<div id="content" class="hide">
    <form id="form" class="jx-form form-horizontal">
        <div class="row">
            <div class="control-group span15">
                <label class="control-label">广告抬头：</label>
                <div class="controls">
                    <input type="text" class="control-text" data-rules="{required:true}">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="control-group control-row5 span12">
                <label for="" class="control-label has-note">
                    轮播图片:
                    <div class="label-note"> 图标尺寸:<br>
                        px*px
                    </div>
                </label>
                <div class="controls">
                    <input id="upload-img" type="file" class="hide">
                    <a href="#" class="btn-upload">
                        <span>上传图片</span>
                        <img src="" width="98" height="98">
                        <input name="b" type="text" data-rules="{required:true}" value="" style="display: none">
                    </a>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span15">
                <label class="control-label">描点位置：</label>
            </div>
        </div>
        <div class="row">
            <div class="control-group span6">
                <label class="control-label control-label-small">描点名称：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span6">
                <label class="control-label control-label-small">商品货号：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">水平X：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">垂直Y：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span6">
                <label class="control-label control-label-small">描点名称：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span6">
                <label class="control-label control-label-small">商品货号：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">水平X：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">垂直Y：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span6">
                <label class="control-label control-label-small">描点名称：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span6">
                <label class="control-label control-label-small">商品货号：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">水平X：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
            <div class="control-group span5">
                <label class="control-label control-label-small">垂直Y：</label>
                <div class="controls">
                    <input type="text" class="input-small control-text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span15">
                <label class="control-label">排序：</label>
                <div class="controls">
                    <input type="text" class="input-medium control-text">
                </div>
            </div>
        </div>

    </form>
</div>

<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript" src="../../../assets/js/admin.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script>
  /*  BUI.use(['bui/grid', 'bui/data', 'bui/overlay', 'bui/calendar', 'common/search'], function (Grid, Data, Overlay, Calendar, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '序号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '轮播图片',
                elCls: 'center',
                dataIndex: 'b',
                width: 150
            }, {
                title: '广告抬头',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '关联店铺',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    return '<span class="grid-command btn-add">[ 编辑 ]</span>' +
                        '<span class="grid-command btn-del">[ 删除 ]</span>'; //页面操作不需要使用Search.createLink
                }
            }],
            data = [{
                o: '1',
                a: '1',
                b: '<img style="height: 60px;" src="../../../assets/img/u9486.png">',
                c: 'adidas新款',
                d: '后台',
                e: '2016-02-13 19:00:00',
                f: '正常',
                g: '0'
            }];
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                forceFit: true,
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            });
        var dialog = new Overlay.Dialog({
            title: '新增轮播',
            width: 940,
            contentId: 'content',
            success: function () {
            }
        });

        //设置用户编号
        $("#add-account-btn").click(function () {
            dialog.show();
        });
        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-add')) { //点击分配操作
                dialog.show()

            } else if (sender.hasClass('btn-del')) { //点击刪除操作
                delFunction(item, itemEl);
            }

        });

        //没有多选插件，删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除该轮播吗？', function () {
                /!*      $.ajax({
                 url: basePath + '/mallGoodsBrandFacade/delete',
                 dataType: 'json',
                 data: {id: item.id},
                 success: function (data) {
                 if (data.status == '0') { //删除成功
                 store.remove(item);
                 } else { //删除失败
                 BUI.Message.Alert(data.info, "error");
                 BUI.Message.Alert('删除失败！');
                 }
                 }
                 });*!/
            }, 'question');
        }

        grid.render();
    });
*/</script>
<!-- script end -->
<script>
    BUI.use(['bui/grid', 'bui/data','bui/form'], function (Grid, Data,Form) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '序号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '轮播图片',
                elCls: 'center',
                dataIndex: 'b',
                width: 150
            }, {
                title: '广告抬头',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '关联店铺',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    return '<span class="grid-command btn-edit">[ 编辑 ]</span>' +
                        '<span class="grid-command btn-del">[ 删除 ]</span>'; //页面操作不需要使用Search.createLink
                }
            }],
            data = [{
                o: '1',
                a: '1',
                b: '<img src="../../../assets/img/u9486.png">',
                c: 'adidas新款',
                d: '后台',
                e: '2016-02-13 19:00:00',
                f: '正常',
                g: '0'
            }];

        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            editing = new BUI.Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                autoSave: true, //添加数据或者修改数据时，自动保存
                triggerCls: 'btn-edit'
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'jx-table-thin',
                columns: columns,
                forceFit: true,
                height: 500,
                plugins: [editing],
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            });
        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-edit')) { //点击分配操作


            } else if (sender.hasClass('btn-del')) { //点击刪除操作
                delFunction(item, itemEl);
            }

        });

        // 点击添加对图片操作
        $("#add-account-btn").click(function () {
            $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
            $(".btn-upload").find("img").attr("src", "");
            addFunction();
        });
        // 点击编辑对图片操作
        $("body").on("click", ".btn-edit", function () {
            $(".btn-upload").find("img").replaceWith($(".btn-upload").find("input").val());
            $(".btn-upload").find("span").css("color", "#fff").html("更改图片");
        });

        //添加记录
        function addFunction() {
            var newData = {b: ''};
            editing.add(newData, 'a'); //添加记录后，直接编辑
        }
        //没有多选插件，删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除该轮播吗？', function () {
                /*      $.ajax({
                    url: basePath + '/mallGoodsBrandFacade/delete',
                    dataType: 'json',
                    data: {id: item.id},
                    success: function (data) {
                        if (data.status == '0') { //删除成功
                            store.remove(item);
                        } else { //删除失败
                            BUI.Message.Alert(data.info, "error");
                            BUI.Message.Alert('删除失败！');
                        }
                    }
                });*/
            }, 'question');
        }
        grid.render();


    });


</script>
</body>

</html>
